<template>
  <div>
      <div style="overflow:hidden;">
         <div style="float:left;"><user-address @countryChange="getArea" :isDistrict="isDistrict" ref="AddAddress" /></div>
         <el-button v-if="province==''" type="primary"  class="btn" @click="addPro">添加省</el-button>
         <el-button v-if="province!=''&&city==''" type="primary"  class="btn" @click="addCity">添加市</el-button>
         <el-button v-if="city!=''" type="primary"  class="btn" @click="addCountry">添加区域</el-button>
      </div>
      <el-table style="margin-top:15px;" :data="tableList">
        <el-table-column prop="id" align="center" label="id"></el-table-column>
        <el-table-column prop="areaName" align="center" label="名称"></el-table-column>
        <el-table-column prop="areaCode" align="center" label="地区编码"></el-table-column>
        <el-table-column prop="cityCode" align="center" label="城市编码"></el-table-column>
        <el-table-column prop="center" align="center" label="城市中心点"></el-table-column>
        <el-table-column prop="level" align="center" label="地区级别"></el-table-column>
        <el-table-column prop="parentId" align="center" label="地区父节点"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button
              @click="editRow(scope.row)"
              type="text"
              size="small"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demonstration-box">
        <!-- <span class="demonstration">显示总数</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageParams.size"
          layout="total, prev, pager, next"
          :total="pageParams.totalCount"
        ></el-pagination>
      </div>
      <el-dialog title="添加" :visible.sync="modelDiv" width="30%">
        <el-form label-width="100px">
          <el-form-item label="地区编码">
            <el-input type="text" v-model="addForm.areaCode"></el-input>
          </el-form-item>
          <el-form-item label="地区名">
            <el-input type="text" v-model="addForm.areaName"></el-input>
          </el-form-item>
          <el-form-item label="地区级别">
            <el-input type="text" v-model="addForm.level"></el-input>
          </el-form-item>
          <el-form-item label="城市编码">
            <el-input type="text" v-model="addForm.cityCode"></el-input>
          </el-form-item>
          <el-form-item label="城市中心点">
            <el-input type="text" v-model="addForm.center"></el-input>
          </el-form-item>
          <el-form-item label="地区父节点">
            <el-input type="text" v-model="addForm.parentId"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="modelDiv = false">取 消</el-button>
          <el-button type="primary" @click="add">添加</el-button>
        </span>
      </el-dialog>

      <el-dialog title="编辑" :visible.sync="modelDiv2" width="30%">
        <el-form label-width="100px">
          <el-form-item label="地区编码">
            <el-input type="text" v-model="editForm.areaCode"></el-input>
          </el-form-item>
          <el-form-item label="地区名">
            <el-input type="text" v-model="editForm.areaName"></el-input>
          </el-form-item>
          <el-form-item label="地区级别">
            <el-input type="text" v-model="editForm.level"></el-input>
          </el-form-item>
          <el-form-item label="城市编码">
            <el-input type="text" v-model="editForm.cityCode"></el-input>
          </el-form-item>
          <el-form-item label="城市中心点">
            <el-input type="text" v-model="editForm.center"></el-input>
          </el-form-item>
          <el-form-item label="地区父节点">
            <el-input type="text" v-model="editForm.parentId"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="modelDiv2 = false">取 消</el-button>
          <el-button type="primary" @click="edit">提交</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
const queryString = require("querystring");
import UserAddress from "components/address";
import page from "data/page";
export default {
  mixins: [page],
  name: 'region',
  data(){
    return{
       tableList: [],
       isDistrict:false,
       currentPage: 1,
       modelDiv:false,
       modelDiv2:false,
       province:'',
       city:'',
       form:{
        parentId:-1 
       },
       addForm:{
         areaCode:'',
         areaName:'',
         level:'',
         cityCode:'',
         center:'',
         parentId:''
       },
       editForm:{
         id:'',
         areaCode:'',
         areaName:'',
         level:'',
         cityCode:'',
         center:'',
         parentId:''
       }
    }
  },
   components: {
    UserAddress
  },
  mounted() {
    this.search();
  },
  methods: {
     getArea(){
      let addressParams = this.$refs.AddAddress.getData();
      if(addressParams.city!=""){
          this.form.parentId=addressParams.checkCity[0].id;
          this.province=addressParams.checkProvince[0].id;
          this.city=addressParams.checkCity[0].id;
      }else{
          this.form.parentId=addressParams.checkProvince[0].id;
          this.province=addressParams.checkProvince[0].id;
          this.city="";
      }
      console.log(this.province+'--'+this.city)
      this.search();
    },
    search() {
      const tableParams = {
        size: 20,
        page: this.currentPage - 1
      };
      this.form = this.lodash.assign({}, this.form, tableParams);
      this.axios
        .get("/area/list?" + queryString.stringify(this.form))
        .then(res => {
          if (res.data.code == 200) {
            this.tableList = res.data.data;
            this.setPage(res.data.data);
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        })
    },
    add(){
      this.api
        .post("/area", this.addForm, "form")
        .then(res => {
          this.$message("信息添加成功");
          this.search();
          this.modelDiv=false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    edit(){
      this.api
        .put("/area", this.editForm, "form")
        .then(res => {
          this.$message("信息修改成功");
          this.search();
          this.modelDiv2=false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    editRow(row){
      this.modelDiv2=true;
      this.editForm=row;
    },
    addPro(){
       this.modelDiv=true;
    },
    addCity(){
      if(this.province!=""){
         this.modelDiv=true;
         this.addForm.parentId=this.province
      }else{
        this.$message("请先选择省份！");
      }
    },
    addCountry(){
      if(this.city!=""){
         this.modelDiv=true;
         this.addForm.parentId=this.city
      }else{
        this.$message("请先选择城市！");
      }
    }
  }
  
}
</script>

<style lang="less" scoped>

</style>
